<template>
	<div>
		<div>
			<el-row>
				<el-button type="primary" size="mini" round><i class="el-icon-circle-plus-outline"></i> 新增</el-button>
				<el-button type="success" size="mini" round><i class="el-icon-finished"></i> 保存</el-button>
				<el-button type="danger" size="mini" round><i class="el-icon-delete"></i> 删除</el-button>
				<el-button type="primary" size="mini" round><i class="el-icon-printer"></i> 打印</el-button>
				<el-divider direction="vertical"></el-divider>
				<el-button type="primary" size="mini" round>提交审批</el-button>
				<el-button type="primary" size="mini" round>撤销审批</el-button>
				<el-button type="primary" size="mini" round>审批</el-button>
				<el-button type="primary" size="mini" round>审批记录</el-button>
				<el-divider direction="vertical"></el-divider>
				<el-button type="primary" size="mini" plain round>首张</el-button>
				<el-button type="primary" size="mini" plain round>上张</el-button>
				<el-button type="primary" size="mini" plain round>下张</el-button>
				<el-button type="primary" size="mini" plain round>末张</el-button>
			</el-row>
		</div>
		<hr />
		<h2>采购订单</h2>
		<div class="pur-main">
			<el-form ref="form" :rules="rules" :model="form" label-width="90px" size="small">
				<el-row gutter="20">
					<el-col span="6">
						<el-form-item prop="theme" label="主题:">
							<el-input v-model="form.theme" placeholder="输入主题"></el-input>
						</el-form-item>
					</el-col>
					<el-col span="6">
						<el-form-item prop="purtype" label="采购类别:">
							<el-select v-model="form.purtype" clearable placeholder="请选择">
								<el-option v-for="item in purType" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col span="6">
						<el-form-item prop="sourtype" label="源单类型:">
							<el-select v-model="form.sourtype" clearable placeholder="请选择">
								<el-option v-for="item in sourceType" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col span="6">
						<el-form-item prop="supplier" label="供应商:">
							<el-select v-model="form.supplier" clearable placeholder="请选择">
								<el-option v-for="item in suppLier" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row gutter="20">
					<el-col span="6">
						<el-form-item prop="delivery" label="交货方式:">
							<el-select v-model="form.delivery" clearable placeholder="请选择">
								<el-option v-for="item in deliVery" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col span="6">
						<el-form-item prop="transport" label="运送方式:">
							<el-select v-model="form.transport" clearable placeholder="请选择">
								<el-option v-for="item in tranSport" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col span="6">
						<el-form-item prop="settlement" label="结算方式:">
							<el-select v-model="form.settlement" clearable placeholder="请选择">
								<el-option v-for="item in setTlement" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col span="6">
						<el-form-item prop="pay" label="支付方式:">
							<el-select v-model="form.pay" clearable placeholder="请选择">
								<el-option v-for="item in Pay" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row gutter="20">
					<el-col span="6">
						<el-form-item prop="ourrepre" label="我方负责人:">
							<el-input v-model="form.ourrepre"></el-input>
						</el-form-item>
					</el-col>
					<el-col span="6">
						<el-form-item prop="otherrepre" label="对方负责人:">
							<el-input v-model="form.otherrepre"></el-input>
						</el-form-item>
					</el-col>
					<el-col span="6">
						<el-form-item prop="istax" label="是否增值税:">
							<el-select v-model="form.istax" clearable placeholder="请选择">
								<el-option v-for="item in Tax" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col span="6">
						<el-form-item prop="signdate" label="签单日期:">
							<el-date-picker v-model="form.signdate" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row gutter="20">
					<el-col span="8">
						<el-form-item prop="sourceform" label="源单号:">
							<el-input v-model="form.sourceform">
								<el-button type="text" slot="suffix" icon="el-icon-search" @click="dialogTableVisible = true"></el-button>
							</el-input>
						</el-form-item>
					</el-col>
					<el-dialog title="源单列表" :visible.sync="dialogTableVisible">
						<el-form :inline="true" :model="dialogForm" class="demo-form-inline" size="mini">							
							<el-form-item label="查询条件:">
								<el-select v-model="dialogForm.tital" placeholder="主题">
									<el-option label="主题" value="theme"></el-option>
									<el-option label="编号" value="idcode"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-input v-model="dialogForm.text"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="onSubmit" plain>查询</el-button>
							</el-form-item>
						</el-form>
						<el-table :data="gridData" size="mini" border height="262" @selection-change="getSourceid">
							<el-table-column type="selection" width="45" align="center"></el-table-column>
							<el-table-column align="center" width="50" type="index" label="序号"></el-table-column>
							<el-table-column property="date" label="编号" width="150"></el-table-column>
							<el-table-column property="name" label="主题" width="200"></el-table-column>
							<el-table-column property="address" label="地址"></el-table-column>
						</el-table>
						<span slot="footer" class="dialog-footer">
							<el-button size="mini" @click="dialogTableVisible = false">取 消</el-button>
							<el-button size="mini" type="primary" @click="dialogTableVisible = false">确 定</el-button>
						</span>
					</el-dialog>
					<el-col span="16">
						<el-form-item prop="address" label="到货地址:">
							<el-input v-model="form.address" placeholder="输入到货地址"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col span="12">
						<el-form-item prop="remarks" label="备注:">
							<el-input v-model="form.remarks" type="textarea" maxlength="100" show-word-limit></el-input>
						</el-form-item>
					</el-col>	
				</el-row>
				<div class="upload">
					<el-row>
						<el-upload class="upload-fj" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
						 :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
							<el-button size="small" type="primary">附件</el-button>
						</el-upload>
					</el-row>
				</div>
				<div class="pur-detail">
					<hr/>
					<el-row>
						<span style="color:gray;margin-left: 10px;">采购订单明细</span>
						<el-divider direction="vertical"></el-divider>
						<el-button type="primary" size="mini" @click="addRow(tableData)" plain round>增行</el-button>
						<el-button type="primary" size="mini" @click="delData()" plain round>删行</el-button>
					</el-row>
					<hr />
					<el-table :data="tableData" border style="width:100%" size="mini" height="400" show-summary highlight-current-row
					 :summary-method="getSummaries" @selection-change="selectRow">
						<el-table-column type="selection" width="60" align="center"></el-table-column>
						<el-table-column align="center" width="60" type="index" label="序号"></el-table-column>
						<el-table-column align="center" width="120" prop="id" label="物品编号">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.id"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="150" prop="name" label="物品名称">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.name"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="120" prop="spec" label="规格">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.spec"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="120" prop="unit" label="单位">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.unit"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="120" prop="number" label="采购数量">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.number"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="180" prop="date" label="交货日期">
							<template slot-scope="scope">
								<el-date-picker size="mini" v-model="scope.row.date" type="date" style="width: 100%;"></el-date-picker>
							</template>
						</el-table-column>
						<el-table-column align="center" width="120" prop="price" label="单价">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.price"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="120" prop="contaxprice" label="含税价">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.contaxprice"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="120" prop="tax" label="税率">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.tax"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="120" prop="money" label="金额">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.money"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="120" prop="contaxmoney" label="含税金额">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.contaxmoney"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="120" prop="taxmoney" label="税额">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.taxmoney"></el-input>
							</template>
						</el-table-column>
						<el-table-column align="center" width="180" prop="remark" label="备注">
							<template slot-scope="scope">
								<el-input size="mini" v-model="scope.row.remark"></el-input>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				purType: [
					{
						value: '选项1',
						label: '集中采购'
					}, {
						value: '选项2',
						label: '设备采购'
					}, {
						value: '选项3',
						label: '物料采购'
					}, {
						value: '选项4',
						label: '成品采购'
					}
				],
				
				form: {
					theme: '',
					purtype: '',
					supplier: '',
					delivery: '',
					transport: '',
					signdate: '',
					settlement: '',
					pay: '',
					ourrepre: '',
					otherrepre: '',
					istax: '',
					sourtype: '',
					sourceform: '',
					address: '',
					remarks: ''
				},
				Tax: [
					{
						value: '1',
						label: '是',
					},{
						value: '2',
						label: '否',
					}
				],
				Pay: [
					{
						value: '1',
						label: '现金支付',
					},{
						value: '2',
						label: '银行转账',
					},{
						value: '3',
						label: '微信支付',
					},{
						value: '4',
						label: '支票'
					}
				],
				setTlement: [
					{
						value: '1',
						label: '一次结算',
					},{
						value: '2',
						label: '分期结算',
					},{
						value: '3',
						label: '进度结算',
					}
				],
				deliVery: [
					{
						value: '1',
						label: '一次性交货',
					},{
						value: '2',
						label: '分批交货',
					}
				],
				tranSport: [
					{
						value: '1',
						label: '快递',
					},{
						value: '2',
						label: '海运',
					},{
						value: '3',
						label: '空运',
					}
				],
				suppLier: [{
					value: '1',
					label: '供应商一',
				},{
					value: '2',
					label: '供应商二'
				}],
				dialogForm: {
					tital: '',
					text: ''
				},
				gridData: [{
					date: '2016-05-02',
					name: '王小',
					address: '上海市'
				}, {
					date: '2016-05-04',
					name: '王虎',
					address: '上海市'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市'
				}, {
					date: '2016-05-03',
					name: '小虎',
					address: '上海市'
				}],
				dialogTableVisible: false,
				rules: {
					theme: [{
							required: true,
							message: '请输入主题',
							trigger: 'blur'
						},
						{
							min: 4,
							max: 10,
							message: '长度在 4 到 10 个字符',
							trigger: 'blur'
						}
					],
					purtype: [{
						required: true,
						message: '请选择采购类型',
						trigger: 'change'
					}],
					applicant: [{
						required: true,
						message: '请填写申请人',
						trigger: 'blur'
					}],
					aplidept: [{
						required: true,
						message: '请填写申请部门',
						trigger: 'blur'
					}],
					aplidate: [{
						type: 'date',
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}],
					sourtype: [{
						required: true,
						message: '请选择源单类型',
						trigger: 'change'
					}],
					address: [{
						required: true,
						message: '请输入到货地址',
						trigger: 'blur'
					}],
					number: [{
						required: true,
						message: '请输入数量',
						trigger: 'change'
					}]
				},
				sourceType: [{
					value: '1',
					label: '无来源',
				}, {
					value: '2',
					label: '采购计划',
				}, {
					value: '3',
					label: '库存填充'
				}],
				tableData: [{
					id: '',
					name: '',
					spec: '',
					unit: '',
					number: '',
					date: '',
					reason: ''
				}],
				selectlistRow: [],
				selectSourceid:[]
			}
		},
		methods: {
			// 获取表格选中时的数据
			selectRow(val) {
				this.selectlistRow = val
			},
			//添加行
			addRow(tableData, event) {
				tableData.push({
					id: '',
					name: '',
					spec: '',
					unit: '',
					number: '',
					date: '',
					price: '',
					contaxprice: '',
					tax: '',
					money: '',
					contaxmoney: '',
					taxmoney: '',
					remark: ''
				})
			},
			//删除行
			delData() {
				for (let i = 0; i < this.tableData.length; i++) {
					const val = this.tableData[i];
					val.index = i
				}

				if (this.selectlistRow.length == 0)
					this.$message.error('请先选择删除的数据！')
				this.selectlistRow.forEach(val => {
					this.tableData.forEach((v, i) => {
						if (val.index == v.index) {
							// i 为选中的索引
							this.tableData.splice(i, 1)
						}
					})
				})
				// 删除完数据之后清除勾选框
				this.$refs.tableData.clearSelection()
			},
			//表尾合计
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '总计';
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						sums[index] += ' ';
					} else {
						sums[index] = ' ';
					}
				});

				return sums;
			},
			//dialog查询表单提交
			onSubmit() {
				console.log('submit!');
			},
			//选择源单号
			getSourceid(val){
				this.form.sourceform = (val[0])['name']
			},
			
			//源单引入
			sourceFormInto(){
				
			}

		
		}
	}
</script>

<style>
	h2 {
		text-align: center;
	}

	.pur-main {
		border: 2px solid gainsboro;
		padding-top: 15px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.upload {
		border: 1px solid #66B1FF;
		background: lightgray;
	}

	.pur-detail {
		border: 1px #66B1FF solid;
		margin-top: 10px;
		margin-bottom: 20px;
	}

</style>
